<template>
  <div class="space-y-4">
    <!-- 空状态显示 -->
    <div v-if="false && units.length === 0" class="flex flex-col items-center justify-center min-h-[400px] bg-[#191919] rounded-[20px] p-8">
      <div class="text-6xl mb-4">📚</div>
      <h3 class="text-2xl text-white font-bold mb-2">暂无学习单元</h3>
      <p class="text-white/60 text-center">目前还没有可用的学习单元<br>请稍后再来查看</p>
    </div>
    
    <!-- 现有的单元列表内容 -->
    <div 
      v-else
      v-for="unit in units" 
      :key="unit.id"
      class="relative w-full h-auto min-h-[103px] bg-[#191919] rounded-[20px] p-4 md:p-6 cursor-pointer transition-all duration-300 hover:bg-[#222222] flex flex-col md:flex-row items-start md:items-center"
      :class="{'opacity-50 cursor-not-allowed': unit.locked}"
      @click="handleUnitClick(unit)"
    >
      <!-- 左侧图标 -->
      <div class="flex items-center mb-2 md:mb-0">
        <div class="w-6 h-6 flex items-center justify-center">
          <UnlockedIcon v-if="!unit.locked" class="text-white" :size="20" />
          <LockedIcon v-else class="text-white/50" :size="20" />
        </div>
      </div>

      <!-- 单元标题 -->
      <div class="ml-2 md:ml-4 mb-3 md:mb-0 flex-grow">
        <h3 class="text-xl md:text-2xl lg:text-[32px] text-white font-bold leading-tight md:leading-[39px] font-inter break-words">{{ unit.title }}</h3>
      </div>

      <!-- 进度条区域 -->
      <div class="w-full md:w-auto md:flex-grow lg:max-w-[566px] h-[31px] mt-2 md:mt-0 md:mx-4">
        <!-- 背景进度条 -->
        <div class="relative w-full h-full">
          <div class="absolute inset-0 bg-white/20 rounded-[20px] shadow-lg"></div>
          
          <!-- 实际进度条 -->
          <div 
            class="absolute top-0 left-0 h-full bg-white rounded-[20px] shadow-lg transition-all duration-500"
            :style="{ width: `${unit.progress}%` }"
          ></div>
          
          <!-- 进度百分比文字 -->
          <div class="absolute left-[11px] top-1/2 transform -translate-y-1/2">
            <span class="text-black text-lg md:text-xl lg:text-[24px] font-bold leading-tight md:leading-[29px] font-inter">{{ unit.progress }}%</span>
          </div>
        </div>
      </div>

      <!-- 右侧单词数量 -->
      <div class="absolute top-3 right-3 md:static md:ml-2">
        <div class="flex items-center gap-2">
          <VocabularyIcon class="text-white" :size="18" />
          <span class="text-white text-base md:text-lg lg:text-[20px] font-bold leading-tight md:leading-[24px] font-inter">{{ unit.words }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UnlockedIcon, LockedIcon } from '@/components/icons';
import VocabularyIcon from '@/components/icons/VocabularyIcon.vue';

// 接收单元列表数据
const props = defineProps({
  units: {
    type: Array,
    required: true,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits(['select-unit']);

// 处理单元点击
const handleUnitClick = (unit) => {
  if (!unit.locked) {
    emit('select-unit', unit.id);
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.font-inter {
  font-family: 'Inter', sans-serif;
}
</style> 